<template>
 <el-container>
  <el-header><the-header/></el-header>
  <el-container>
    <el-aside width="200px"><the-aside/></el-aside>
    <el-main><router-view/></el-main>
  </el-container>
 
   
</el-container>

</template>

<script>

import TheHeader from './TheHeader.vue'
import TheAside from './TheAside.vue'
import bus from '@/assets/js/bus'

export default {
  components: {
    TheHeader,
    TheAside
  },
  data() {
    return {
      collapse: false
    }
  },
  created() {
    //通过bus进行组件建立通信来折叠侧边栏
    bus.$on('collapse', msg => {
      this.collapse = msg
    })
  }


}
</script>

<style>
.el-header,
.el-footer {
  position: relative;
  background-color: #253041;
  font-size: 22px;
  color: #ffffff;
  line-height: 70px;
}

.content-box {
  position: absolute;
  left: 200px;
  right: 0;
  top: 68px;
  bottom: 0;
  overflow-y: scroll;
  -webkit-transition: left .3s ease-in-out;
  transition: left .3s ease-in-out;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.content-collapse {
  left: 65px;
}

.body {
  height: 100%;
  background-color: rgba(243, 242, 242, 0.5);
}

</style>